<template>
  <div class="cultivate">
    <div class="boss">
      <div class="boss-box">
        <span class="el-tag el-tag--warning" @click="openBossInfo">{{ store.boss.name }}</span>
        <el-alert class="desc" :title="store.boss.desc" :closable="false" type="error" />
      </div>
    </div>
    <div class="storyText">
      <div class="storyText-box">
        <el-scrollbar ref="scrollbar" always>
          <p class="fighting" v-if="isFighting" v-text="`${guashaRounds}回合 / 50回合`" />
          <p v-for="(item, index) in texts" :key="index" v-html="item" @click="openEquipmentInfo(equipmentInfo)" />
        </el-scrollbar>
      </div>
    </div>
    <div class="actions">
      <el-button @click="startFightBoss" :disabled="isEnd">发起战斗</el-button>
      <el-button @click="router.push('/home')">回家疗伤</el-button>
    </div>
  </div>
</template>

<script setup>
  import boss from '@/plugins/boss'
  import { useRouter } from 'vue-router'
  import { ref, onUnmounted, onMounted } from 'vue'
  import { useMainStore } from '@/plugins/store'
  import { ElMessageBox } from 'element-plus'
  import { maxLv, levelNames, formatNumberToChineseUnit, genre, levels, smoothScrollToBottom } from '@/plugins/game'

  const router = useRouter()
  const store = useMainStore()
  const isEnd = ref(false)
  const texts = ref([])
  const player = ref(store.player)
  const timerIds = ref([])
  const currency = ref(boss.getRandomInt(1, 10))
  const isFighting = ref(false)
  const startFight = ref(false)
  const isequipment = ref(false)
  const guashaRounds = ref(50)
  const equipmentInfo = ref({})
  const scrollbar = ref(null)

  // 开始攻击
  const startFightBoss = () => {
    if (isEnd.value) return
    isEnd.value = true
    const zs = player.value.reincarnation * 10
    const time = zs >= 200 ? 100 : 300 - zs
    const timerId = setInterval(() => {
      fightBoss()
      const element = scrollbar.value?.wrapRef
      const observer = new MutationObserver(() => {
        smoothScrollToBottom(element)
      })
      observer.observe(element, {
        childList: true,
        subtree: true
      })
    }, time)
    timerIds.value.push(timerId)
  }

  // 停止攻击
  const stopFightBoss = () => {
    timerIds.value.forEach(id => clearInterval(id))
    timerIds.value = []
  }

  // boss信息
  const openBossInfo = () => {
    const info = store.boss
    ElMessageBox.confirm('', info.name, {
      center: true,
      message: `<div class="monsterinfo">
      <div class="monsterinfo-box">
      <p>境界: ${levelNames(info.level)}</p>
      <p>气血: ${formatNumberToChineseUnit(info.health)}</p>
      <p>攻击: ${formatNumberToChineseUnit(info.attack)}</p>
      <p>防御: ${formatNumberToChineseUnit(info.defense)}</p>
      <p>闪避率: ${info.dodge > 0 ? (info.dodge * 100 > 100 ? 100 : (info.dodge * 100).toFixed(2)) : 0}%</p>
      <p>暴击率: ${info.critical > 0 ? (info.critical * 100 > 100 ? 100 : (info.critical * 100).toFixed(2)) : 0}%</p>
      <p>鸿蒙石掉落: ${currency.value}块</p>
      <p>神装掉落率: 100%</p>
      </div>
    </div>`,
      showCancelButton: false,
      confirmButtonText: '知道了',
      dangerouslyUseHTMLString: true
    }).catch(() => {})
  }

  // 攻击世界boss
  const fightBoss = () => {
    if (player.value.level < maxLv) {
      isEnd.value = true
      stopFightBoss()
      texts.value.push(`你的境界尚未达到${levelNames(maxLv)}, ${store.boss.name}对于你的挑战不屑一顾`)
      return
    }
    if (store.boss.health <= 0 || !store.boss.health) {
      texts.value.push('BOSS刷新时间还未到')
      return
    }
    isFighting.value = true
    // boss伤害计算
    const monsterAttack = store.boss.attack // boss攻击
    const playerDefense = player.value.defense // 玩家防御
    let monsterHarm = Math.max(0, Math.floor(monsterAttack - playerDefense)) // boss伤害
    monsterHarm = monsterHarm <= 1 ? 1 : monsterHarm // 伤害小于1时强制破防
    // 玩家伤害计算
    const playerAttack = player.value.attack // 玩家攻击
    const monsterDefense = store.boss.defense // boss防御
    let playerHarm = Math.max(0, Math.floor(playerAttack - monsterDefense)) // 玩家伤害基础值
    playerHarm = playerHarm <= 1 ? 1 : playerHarm // 伤害小于1时强制破防
    // 是否暴击
    let isMCritical = false,
      isCritical = false
    // 玩家是否闪避
    const isPlayerHit = Math.random() > store.boss.dodge
    // boss是否闪避
    const isBHit = Math.random() > player.value.dodge
    // 检查boss是否暴击
    if (Math.random() < store.boss.critical) {
      // boss暴击，伤害加倍
      monsterHarm *= 2
      // boss成功暴击
      isMCritical = true
    }
    // 检查玩家是否暴击
    if (Math.random() < player.value.critical) {
      // 玩家暴击，伤害加倍
      playerHarm *= 1.5
      // 玩家成功暴击
      isCritical = true
    }
    // 如果玩家没有闪避，扣除玩家气血
    if (isBHit) player.value.health -= monsterHarm
    // 如果boss没有闪避，扣除boss气血
    if (isPlayerHit) store.boss.health -= playerHarm
    player.value.health = Math.max(0, player.value.health)
    store.boss.health = Math.max(0, store.boss.health)
    if (guashaRounds.value > 1) {
      // 扣除回合数
      guashaRounds.value--
      // boss气血小于等于0
      if (store.boss.health <= 0) {
        const equipItem = boss.boss_Equip(maxLv)
        isequipment.value = true
        equipmentInfo.value = equipItem
        texts.value.push(
          `你击败${store.boss.name}后，获得了<span class="el-tag el-tag--${equipItem.quality}">${
            levels[equipItem.quality]
          }${equipItem.name}(${genre[equipItem.type]})</span>`
        )
        // 如果装备背包当前容量大于等于背包总容量
        if (player.value.inventory.length >= player.value.backpackCapacity)
          texts.value.push(`当前装备背包容量已满, 该装备自动丢弃, 转生可增加背包容量`)
        // 玩家获得道具
        else player.value.inventory.push(equipItem)
        // 增加悟性丹
        player.value.props.rootBone += 1
        // 获得悟性丹通知
        texts.value.push('你获得了1颗悟性丹')
        // 增加鸿蒙石
        player.value.props.currency += currency.value
        // 获得鸿蒙石通知
        texts.value.push(`你获得了${currency.value}块鸿蒙石`)
        // 修改按钮状态
        isEnd.value = true
        // 修改boss状态
        store.boss.time = Math.floor(Date.now() / 1000)
        store.boss.health = 0
        store.boss.conquer = true
        stopFightBoss()
      } else if (player.value.health <= 0) {
        isEnd.value = true
        // 恢复boss血量
        store.boss.health = store.boss.maxhealth
        texts.value.push('你因为太弱被击败了。')
        texts.value.push(`${store.boss.text}`)
        stopFightBoss()
        guashaRounds.value = 50
      } else {
        texts.value.push(
          isPlayerHit
            ? `你攻击了${store.boss.name}，${isCritical ? '触发暴击' : ''}造成了${playerHarm}点伤害，剩余${
                store.boss.health
              }气血。`
            : `你攻击了${store.boss.name}，对方闪避了你的攻击，你未造成伤害，剩余${store.boss.health}气血。 `
        )
        texts.value.push(
          isBHit
            ? `${store.boss.name}攻击了你，${isMCritical ? '触发暴击' : ''}造成了${monsterHarm}点伤害`
            : `${store.boss.name}攻击了你，你闪避了对方的攻击，对方未造成伤害，你剩余${player.value.health}气血。 `
        )
      }
    } else {
      // 恢复默认回合数
      guashaRounds.value = 50
      stopFightBoss()
      // 恢复boss血量
      store.boss.health = store.boss.maxhealth
      texts.value.push(`回合结束, 你未战胜${store.boss.name}你输了。`)
      texts.value.push(`${store.boss.text}`)
    }
  }

  const openEquipmentInfo = item => {
    if (!isequipment.value) return
    ElMessageBox.confirm('', item.name, {
      center: true,
      message: `<div class="monsterinfo">
      <div class="monsterinfo-box">
        <p>类型: ${genre[item.type] ?? '未知'}</p>
        <p>境界: ${levelNames(item.level)}</p>
        <p>品质: ${levels[item.quality] ?? '未知'}</p>
        <p>气血: ${formatNumberToChineseUnit(item.health)}</p>
        <p>攻击: ${formatNumberToChineseUnit(item.attack)}</p>
        <p>防御: ${formatNumberToChineseUnit(item.defense)}</p>
        <p>闪避率: ${(item.dodge * 100).toFixed(2) ?? 0}%</p>
        <p>暴击率: ${(item.critical * 100).toFixed(2) ?? 0}%</p>
        </div>
    </div>`,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      dangerouslyUseHTMLString: true,
      showCancelButton: false,
      confirmButtonText: '知道了'
    })
      .then(() => {
        router.push('/home')
      })
      .catch(() => {
        router.push('/home')
      })
  }

  // 世界BOSS
  const assaultBoss = () => {
    // boss生成的时间
    const time = getMinuteDifference(store.boss.time)
    // boss难度根据玩家最高等级 + 转生次数
    const bossLv = maxLv * player.value.reincarnation + maxLv
    // 检查boss的血量和时间
    if (store.boss.health > 0) {
      // 如果boss还有血量，允许玩家挑战
      if (time >= 5) {
        // boss没有血量但时间大于等于5分钟，重新生成boss
        store.boss = boss.drawPrize(bossLv)
      }
      // 如果boss没有血量
    } else {
      if (time >= 5 || store.boss.time == 0) {
        // boss没有血量但时间大于等于5分钟，重新生成boss
        store.boss = boss.drawPrize(bossLv)
      } else {
        isEnd.value = true
        texts.value.push('BOSS还未刷新，请等待5分钟后再次挑战')
        return
      }
    }
    //更新回合数
    guashaRounds.value = 50
  }

  // 计算当前时间和指定时间相差多少分钟
  const getMinuteDifference = specifiedTimestamp => {
    // 获取当前时间戳（秒数）
    const currentTimestamp = Math.floor(Date.now() / 1000)
    specifiedTimestamp = specifiedTimestamp == 0 ? currentTimestamp : specifiedTimestamp
    // 计算时间差（分钟数）
    const timeDifferenceInSeconds = Math.abs(currentTimestamp - specifiedTimestamp)
    const timeDifferenceInMinutes = Math.floor(timeDifferenceInSeconds / 60)
    return timeDifferenceInMinutes
  }

  onMounted(() => {
    assaultBoss()
  })

  onUnmounted(() => {
    stopFightBoss()
  })
</script>

<style scoped>
  .boss-box .desc {
    margin: 10px 0;
  }
</style>
